<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    function move(ele, arg, target) {
        return new Promise((resolve, reject) => {
            let start = parseInt(window.getComputedStyle(ele, null)[arg]);
            let dis = (target - start) / Math.abs(target - start);
            // console.log(dis);
            let speed = dis * 5;
            function fn() {
                let now = parseInt(window.getComputedStyle(ele, null)[arg]);
                if (now === target) {
                    // console.log("运动完成")
                    resolve("运动完成");
                    // cb && cb("运动完成");
                } else {
                    ele.style[arg] = now + speed + "px";
                    // setTimeout(fn, 100);
                    window.requestAnimationFrame(fn);
                }
            }
            fn();
        })
    }
    let ele = document.querySelector(".box");

    async function fn() {
        try {
            await move(ele, "left", 200);
            await move(ele, "top", 200);
            await move(ele, "left", 0);
            let res = await move(ele, "top", 0);
            console.log(res);
        } catch (err) {
            console.log(err);
        }
    }
    fn();

    // move(ele, "left", 200).then(res=>{
    //     // console.log(res);
    //     return move(ele, "top", 200);
    // }).then(res=>{
    //     // console.log(res);
    //     return move(ele, "left", 0);
    // }).then(res=>{
    //     return move(ele, "top", 0);
    // }).then(res=>{
    //     console.log(res)
    // }).catch(err=>{
    //     console.log(err);
    // })


    // catch  是有返还值； 返还至参照then方法；
    // move(ele, "left", 200, function (res) {})

    // move(ele, "left", 200, function (res) {
    //     move(ele, "top", 200, function (res) {
    //         // console.log(res);
    //         move(ele, "left", 0, function (res) {
    //             move(ele, "top", 0, function (res) {
    //                 console.log(res);
    //             })
    //         })
    //     });
    // });



</script>

</html>